import React from 'react';
import {ToastComponent, AlertComponent, Spinner} from 'amis';
import {Route, Switch, Redirect, HashRouter as Router} from 'react-router-dom';
import {observer} from 'mobx-react';

const Home = React.lazy(() => import('./Home'));
const PageEditor = React.lazy(() => import('./PageEditor'));

export default observer(function (props: any) {
    return (
        <Router>
            <div className="routes-wrapper">
                <ToastComponent key="toast" position={'top-center'}/>
                <AlertComponent key="alert"/>
                <React.Suspense
                    fallback={<Spinner overlay className="m-t-lg" size="lg"/>}
                >
                    <Switch>
                        <Redirect to={`/pages/root`} from={`/`} exact/>
                        <Route path="/pages/:pageId" component={Home}/>
                        <Route path="/pageEditor/:pageId" component={PageEditor}/>
                        <Route component={Home}/>
                    </Switch>
                </React.Suspense>
            </div>
        </Router>
    );
});
